<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div id="computed-setter">
            <input type="text" v-model="firstName" placeholder="first name">
            <input type="text" v-model="lastName" placeholder="last name">
            <hr>
            <p>{{ fullName }}</p>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        firstName: '' ,
                        lastName: ''
                    }
                },
                // 为根组件定义计算属性
                computed: {
                    fullName: {
                        // getter
                        get(){
                            console.log( '获取计算属性fullName的值' );
                            return this.firstName + '·' + this.lastName ;
                        },
                        // setter
                        set(value){
                            // 判断 字符串 中是否包含指定的字符
                            if( value.includes( '·' ) ) {
                                console.log( '为计算属性fullName赋值' );
                                let names = value.split( '·' );
                                this.firstName = names[ 0 ] ;
                                this.lastName = names[ names.length - 1 ];
                            }
                        }
                    }
                }
            });

            const vm = app.mount( '#computed-setter' );
            console.log( vm );
        </script>
        
    </body>
</html>